<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
     
            <input value="0" id="result" />
       <input type="button" value="AC" id="ac" onclick="qingchu()" />
            <input type="button" value="+/-" />
            <input type="button" value="%" id="yu" />
            <input type="button" value="/" id="div" onclick="div()"  />

        
            <input type="button" value="7" />
            <input type="button" value="8" />
            <input type="button" value="9" />
            <input type="button" value="*" id="mul"   />
         <input type="button" value="4" />
            <input type="button" value="5" />
            <input type="button" value="6" />
            <input type="button" value="-" id="sub"    />

       
            <input type="button" value="1" />
            <input type="button" value="2" />
            <input type="button" value="3" />
            <input type="button" value="+" id="add"   />

        
            <input type="button" value="0" id="s2" />
         <input type="button" value="." id="" />
            <input type="button" value="=" id="eq" />
        
        <script>
            function qingchu() {
                result.value = "";

            }
            var inputs = document.getElementsByTagName("input");
            var result = document.getElementById("result");
            var num1;
            var num2;
            var ope;
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].id == "add" || inputs[i].id == "sub" || inputs[i].id == "div" || inputs[i].id == "mul" || inputs[i].id == "yu") {
                    inputs[i].onclick = function () {
                        num1 = parseFloat(result.value);
                        ope = this.id;
                        result.value = "";
                    };
                    continue;
                } else if (inputs[i].id == "eq") {
                    inputs[i].onclick = function () {
                        num2 = parseFloat(result.value);
                        if (ope == "add") {
                            result.value = num1 + num2;
                        } else if (ope == "sub") {
                            result.value = num1 - num2;
                        } else if (ope == "mul") {
                            result.value = num1 * num2;
                        } else if (ope == "div") {
                            result.value = num1 / num2;
                        } else if (ope == "yu") {
                            result.value = num1 % num2;
                        }
                    };
                    continue;
                }
                if (inputs[i].id != "result" && inputs[i].id != "ac") {
                    inputs[i].onclick = function () {

                        if (result.value == "0") {
                            result.value = this.value;

                        }
                        else {
                            result.value = result.value + this.value;

                        }
                    };

                }
            }
        </script>
  </div>

</body>
